<template>
    <div>
        <el-button type="" plain link @click="updateClick()" size="small">详情</el-button>
        <el-dialog v-model="UpdateDialogVisible" title="题目详情" width="30%" @close="cancelUpdateClick()"
            :close-on-click-modal="false" :append-to-body="true">
            <span>
                <el-descriptions title="题目信息" direction :column="4" size="large" border>
                    <el-descriptions-item label="题目" span="4" >{{dat.subjectTitle}}</el-descriptions-item>
                    <el-descriptions-item label="题型" span="1">{{subjectTypeName}}</el-descriptions-item>
                    <el-descriptions-item label="发布状态" span="1">{{dat.status == 1 ? '已发布':'待发布'}}</el-descriptions-item>
                    <el-descriptions-item label="正确答案" span="2">{{dat.subjectRightKey}}</el-descriptions-item>
                    <el-descriptions-item label="科目" span="4">{{accountTypeName}}</el-descriptions-item>
                    <el-descriptions-item label="选项答案" span="4">
                        <div v-for="item in subjectOptionAnswer" :key="item.id">{{item.id+" . "+item.content}}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="创建人" span="1">{{dat.createUserName}}</el-descriptions-item>
                    <el-descriptions-item label="创建时间" span="3">{{dat.createOperationRecordTime}}</el-descriptions-item>
                    <el-descriptions-item label="备注" span="4">{{dat.createOperationRecordRemarks}}</el-descriptions-item>
                    <el-descriptions-item label="修改人" span="1">{{dat.updateUserName}}</el-descriptions-item>
                    <el-descriptions-item label="修改时间" span="3">{{dat.updateOperationRecordTime}}</el-descriptions-item>
                    <el-descriptions-item label="备注" span="4">{{dat.updateOperationRecordRemarks}}</el-descriptions-item>
                    
                </el-descriptions>
                
            </span>
            <template #footer>
                        <el-button type="" plain  @click="cancelUpdateClick()" >取消</el-button>
                </template>
        </el-dialog>
    </div>

</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
import { useStore } from 'vuex'
export default {
    props:['data'],
    setup(props){
        const store = new useStore()
        let dat = ref(null)
        let accountTypeName = ref('')
        let subjectTypeName = ref('')
        let subjectOptionAnswer = ref([])
        dat.value = props.data
        
        watch(()=>props.data,(newVal)=>{
            dat.value = newVal
            
        })
        let UpdateDialogVisible = ref(false)
        function updateClick(){
            UpdateDialogVisible.value = true
            store.state.questionBank.subjectModel.subjectTypeTreeData.forEach((val)=>{
                val.industryAccountType.forEach((vals)=>{
                    vals.industryAccountType.forEach((vales)=>{
                        vales.industryAccountType.forEach((v)=>{
                            if(v.industryId == dat.value.accountTypeId){
                                accountTypeName.value = val.industryName+" > "+vals.industryName+" > "+vales.industryName+" > "+v.industryName
                            }
                        })
                    })
                })
            })
            store.state.questionBank.subjectModel.subjectPagination.subjectTypeList.forEach((val)=>{
                if(val.subjectTypeId == dat.value.subjectTypeId){
                    subjectTypeName.value = val.subjectTypeName
                }
            })
            JSON.parse(dat.value.subjectOptionAnswer).forEach((val)=>{
                subjectOptionAnswer.value.push(val)
            })
            
        }
        function cancelUpdateClick(){
            UpdateDialogVisible.value = false
        }

        return {
            dat,
            accountTypeName,
            subjectTypeName,
            subjectOptionAnswer,
            cancelUpdateClick,
            UpdateDialogVisible,
            updateClick
        }
    }
}
</script>

<style>

</style>